import Schedules from "../../api/schedules.js";
import Return from "./schedules.js";
import Indent from "../../api/schedules.js"
export default class {
    constructor({ obj, el }) {
        // 接收传入的值添加给this
        this.$el = $(el);
        this.obj = obj;
        this.init();
        this.data =[];
    }
    init() {
        this.render();
        this.handle();
    }
    // 构建页面框架
    render() {
        this.$el.html(
            `<div style=" display: flex;">
                <div style="margin:40px 100px ;width: 810px;" >
                    <div style=" display: flex;margin:30px 0px ;">
                        <h1 style=" flex: 1;">放映厅座位</h1>
                        <button type="submit" class="layui-btn" id="back" lay-submit="" lay-filter="demo1">返回</button>
                    </div>
                    <table id ="tacket">
                        <tbody class="layui-btn-container"></tbody>
                    </table>
                </div>
                <div>
                    <div style="margin:66px 40px 0px 0px;border: 1px solid rgb(175, 171, 171);padding: 20px 20px; height: 400px;">
                        <h1 id="movies"><h1>
                        <p id="cinemas" style="font-size: 16px;margin:10px 0px ;"><p>
                        <p id="projection" style="font-size: 16px;"><p>
                        <p id="time" style="font-size: 10px;margin:10px 0px ;"><p>
                        <div id="tota" style="font-size: 16px;">
                            <div id="price" style="font-size: 18px;color: red;"></div>
                        </div>
                    </div>
                    <button type="button" class="layui-btn" style="margin:10px 0px 0px 70px;" name="click">
                        <a href="#/info/add-schedules">提交</a>
                    </button>
                </div>       
            </div>
             
            `
        );
        this.$back = $("#back");
        this.$tacket = $("#tacket");
        this.$movies = $("#movies");
        this.$cinemas = $("#cinemas");
        this.$projection = $("#projection");
        this.$time = $("#time");
        this.$price = $("#price");
        this.rerender();
    }
    async rerender() {
        const scheduleId = this.obj.data._id
        // 获取座位数据并渲染
        const data = await Schedules.Seats({ scheduleId });
        let seatContent = ``;
        for (let i = 0; i <= 8; i++) {
            let temp = `<tr>`;
            for (let j = 0; j <= 8; j++) {
                if (data[j].status == 0) {
                    temp += `<td><button type="button" class="layui-btn layui-btn-primary" name="${data[j].seatId._id}" data-index="${data[j]._id}">${data[j].seatId.name}</button></td>`
                } else {
                    temp += `<td><button type="button" class="layui-btn layui-btn-danger" name="${data[j].seatId_id}" data-index="${data[j]._id}">${data[j].seatId.name}</button></td> `
                }
            }
            temp += `</tr>`
            data.splice(0, 9);
            seatContent += temp;
        }
        $(".layui-btn-container").html(seatContent);
        // 渲染排片信息
        this.$movies.html(this.obj.data.movieId); // 影片
        this.$cinemas.html(this.obj.data.cinemasId);  //影院
        this.$projection.html(this.obj.data.theaterId); //影厅
        this.$time.html(this.obj.data.showTime); //时间
    };
    // 按钮点击事件
    handle() {
        this.$back.on("click", this.back.bind(this)); // 返回排片页面
        this.$tacket.on("click", this.tacket.bind(this)); // 选座
        $("button[name='click']").on("click", this.clic.bind(this)); // 保存
    };
    // 电影详情渲染
    tacket(e) {
        const event = e || window.event;
        // 判断是否被选
        if (event.target.getAttribute("class") == "layui-btn layui-btn-danger") { return };
        // 改变class属性，改变按钮颜色
        event.target.setAttribute("class", "layui-btn layui-btn-danger");
        // 把点击按钮数据提取到右侧
        let pEle = document.createElement("p");
        let divEle = document.getElementById("tota");
        divEle.appendChild(pEle);
        pEle.innerText = event.target.innerText;
        pEle.setAttribute("name", event.target.name);
        let diEle = divEle.childNodes;
        // 添加价格
        let total = diEle.length - 3;
        this.$price.html(`${total * this.obj.data.price} 元`);
        // 获取模拟用户数据
        const userId = sessionStorage.getItem("userName");
        const user = event.target.dataset.index;
        this.data.push({
            scheduleId: this.obj.data._id,
            seatingsId: user,
            admisId: userId,
        });
    }
    // 返回排片页面
    back() {
        new Return({ el: ".info-content" });
    }
    async clic() {
        // console.log(this.data);
        await Indent.indent({ seatId: JSON.stringify(this.data) });

    }
}